import { debounce } from "./funDebounce";
import { ElLoading } from 'element-plus'
// loading对象
let loading;

// 当前正在请求的数量
let needLoadingRequestCount = 0;

// 显示loading
export function showLoading(target) {
  // 后面这个判断很重要，因为关闭时加了抖动，此时loading对象可能还存在，
  // 但needLoadingRequestCount已经变成0.避免这种情况下会重新创建个loading
  // console.log(needLoadingRequestCount, loading);
  if (needLoadingRequestCount === 0 && !loading) {
    loading = ElLoading.service({ // 通过cdn引入的element-ui
      lock: true,
      text: "加载中...",
      background: "rgba(255, 255, 255, 0.7)",
      target: target || "#app"
    });
  }
  needLoadingRequestCount++;
}

// 隐藏loading
export function hideLoading() {
  needLoadingRequestCount--;
  needLoadingRequestCount = Math.max(needLoadingRequestCount, 0); // 做个保护
  if (needLoadingRequestCount === 0) {
    // 关闭loading
    toHideLoading();
  }
}

// 防抖：将 300ms 间隔内的关闭 loading 便合并为一次。防止连续请求时， loading闪烁的问题。
let toHideLoading = debounce(() => {
  loading.close();
  loading = null;
}, 300);

